MediaWiki:Gadget-Lightbox.js

/* _____________________________________________________________________________ * |                                                                             | * |                    === WARNING: GLOBAL GADGET FILE ===                      | * |                 Changes to this page affect many users. | * |          Please discuss changes on the talk page before editing. | * |_____________________________________________________________________________| */ (function (mw, $) { var imgMap = {};  var displayModal = function (magLink, imgInfo) {    // display the modal    $('#dw-img-modal').css('display', 'block');

// set wrapper div width $('#dw-img-modal-wrapper').css('width', imgInfo['thumbwidth'] + 'px');

// set hyperlink to description page $('#dw-img-modal-link').attr('href', imgInfo['descriptionurl']); // set image properties var modalImg = $('#dw-img-modal-img'); modalImg.attr('src', imgInfo['thumburl']); // set the caption var caption = $('#dw-img-modal-caption'); var captionContents = magLink.parent.contents.filter(function {      return !$(this).hasClass('magnify');    }); caption.empty; caption.append(captionContents.clone); }; // Query MediaWiki for a suitable maximally sized thumbnail - it will return the // main image URL if the size asked for is larger than the actual image itself, so // no special cases are required for handling that. Once the data is obtained, the // lightbox modal will be displayed. var doImageQuery = function (magLink, pageName, width) { (new mw.Api).get({     action:     'query',      prop:       'imageinfo',      titles:     pageName,      iiprop:     'url',      iiurlwidth: width    }).done(function (data) {      var infoKey = pageName + '_' + width;      try {        var pages = data.query.pages; // NB: this is an object, NOT an array.        for(var page in pages) {          if(pages.hasOwnProperty(page)) {            imgMap[infoKey] = pages[page].imageinfo[0];          }        }      } catch(ex) {        // oops!?        console.log('Warning: could not get imageinfo API information for ' + pageName);      }      // if the imageinfo is now available, display the modal      if(imgMap.hasOwnProperty(infoKey)) {        displayModal(magLink, imgMap[infoKey]);      }    }); }; // Returns the File article title given the href from its article link // NB: probably not generic enough to work on all wikis var urlToTitle = function (url) { return decodeURIComponent(url.substring(url.lastIndexOf('/') + 1)); };

// Handler for magnify links var onClickMagnify = function (event) { var magLink = $(this); var width   = (0.8 * $(document).width) ^ 0; var imgTitle = urlToTitle(magLink.children[0].href); var infoKey = imgTitle + '_' + width;

// if the imageinfo is already cached, display the modal immediately; // otherwise, query for the info if(imgMap.hasOwnProperty(infoKey)) { displayModal(magLink, imgMap[infoKey]); } else { doImageQuery(magLink, imgTitle, width); }   event.preventDefault; event.stopPropagation; return false; }; // Create the singleton modal lightbox div on the page var createModal = function { $('body').append(     ' \n' +      '  &times; \n' +      '  \n' +      '    \n' +      '  \n' +      '  \n' +      ' \n'    ); // add on-click handler to the close button $('.dw-img-modal-close').on('click', function {      // hide the modal      $('.dw-img-modal').css('display', 'none');    });

// add an on-key-down handler to close on escape $(document).on('keydown', function (event) {      var modal = $('.dw-img-modal');      if(event.which == 27 && modal.css('display') == 'block') {        modal.css('display', 'none');       }    }); }; // Change the existing MediaWiki magnify links to activate the lightbox var createLightboxLinks = function { $('.magnify').on('click', onClickMagnify); }; // On ready $(function {    createModal;    createLightboxLinks;  }); })(mediaWiki, jQuery);